import React, { Component } from 'react';
import '../styles/Login.scss'
import pic from '../assets/login.jpg'
import { Form, Input, Button,Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import *as servive from '../api/api'
class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            phone:'',
            pass:'',
        }
    }
    Register(){
        this.props.history.push('/register')
    }
    login(e){
        this.setState({[e.target.name]:e.target.value})
    }
    async onSubmit() {
        var res = await this.refs.formRef.validateFields()
        if(res.errorFields){
            Toast.show({
                content:'请填写正确的表单信息',
                icon:'fail'
            })
        }else{

            var res2 = await servive.user({phone:this.state.phone,pass:this.state.pass})
            console.log(res2);
            if(res2.status === 200){
                Toast.show({
                content:'登录成功',
                icon:'success'
                })
                this.props.history.push('/index')
            }else{
                Toast.show({
                content:'登录失败',
                icon:'fail'
                })
            }
        }
    }
    render() {
        return (
            <div className='login'>
                <div className="toppic">
                    <img src={pic} alt="" />
                </div>
                <div className="forms">
                    {/* <input type="text"placeholder='请输入手机号' /> */}
                    {/* <input type="password" placeholder='请输入密码' /> */}


                    <Form
                        ref='formRef'
                        // footer={
                            // <Button block type='submit' color='primary' size='large'>
                            //     登录
                            // </Button>
                        // }
                    >
                        <Form.Item name='phone'  value={this.state.phone} onChange={(e)=>{ this.login(e)}} rules={[{ required: true, message: '手机号不能为空' }]}>
                            <Input type='text' placeholder='请输入手机号' />
                        </Form.Item>
                        <Form.Item name='pass'  value={this.state.pass} onChange={(e)=>{ this.login(e)}} rules={[{ required: true, message: '密码不能为空' }]}>
                            <Input type='password' placeholder='请输入密码' />
                        </Form.Item>



                    </Form>

                </div>
                <div className="xieyi">
                    <input type="checkbox" />
                    <p>我已同意<span>在线问诊隐私政策</span></p>
                </div>
                <div className="bottons">
                    {/* <button>登录</button> */}
                    <Button block type='submit' onClick={() => { this.onSubmit() }} color='primary' size='large'>
                        登录
                    </Button>
                    <div className="text">
                        <p onClick={()=>{this.Register()}}>注册</p>
                        <p>忘记密码</p>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Login);